<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .goods-ul {
            list-style: none;
            width: 800px;
            height: 1000px;
            margin: auto;
            border: 1px solid #666;
        }
        
        .goods-ul li.goods-li {
            float: left;
            width: 250px;
            border: 1px solid #999;
        }
        
        .goods-ul li.goods-li.active {
            border: 1px solid red;
        }
        
        .goods-name {
            height: 70px;
        }
    </style>
</head>

<body>
    <div>
        <ul class="goods-ul">
            <!-- <li>
                <img width="200" src="https://resource.toolmall.com/merchantbussness/online/2022/3/1646898832412-1large_logo.jpg" alt="">
                <div class="goods-name">【DCH-30170200058】东成_合金钻头6*160圆柄(60202024)/[1支]</div>
                <div class="goods-brand">xx:xx</div>
                <div class="goods-price">¥100.00</div>
                <button>加购</button>
            </li> -->
        </ul>
    </div>
    <!-- 原始数据 -->
    <script src="./js/data.js"></script>
    <!-- 引入jq -->
    <script src="./js/jq.js"></script>
    <script src="./购物车.json"></script>
    <script>
        // 为什么这样写？
        $(function() {
            var liStr = '';
            // ul元素
            var $goodsUl = $('.goods-ul');
            $.each(goodsList, function(i, item) {
                var id = item.id
                liStr += "<li class='goods-li' sku=" + id + ">" +
                    `<a href=./detail.html?id=${id}><img width='200' src=https:${item.image} /></a>` +
                    "<div class='goods-name'>" + item.name + "</div>" +
                    "<div class='goods-brand'>品牌: " + item.brandName + "</div>" +
                    "</li>"
            })
            $goodsUl.html(liStr);

            // $('.goods-li') 这些li元素是动态生成的，用到了事件委托，应该把事件绑定在父元素上
            $goodsUl.on('mouseenter', '.goods-li', function() {
                $(this).addClass('active');
            })
            $goodsUl.on('mouseleave', '.goods-li', function() {
                $(this).removeClass('active');
            })

            // 跳转到详情页
            $goodsUl.on('click', '.goods-li', function() {
                var id = $(this).attr('sku');
                // 带上商品id 方便下个页面展示
                location.href = './detail.html?id=' + id;
            })
        })
    </script>
</body>

</html>